<div ng-controller="abcCtrl">
    <m-page-head title="基础组件详解"></m-page-head>
    <div class="wrapper-md">
        <div class="row row-sm">
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="panel">
                    <div class="panel-heading text-center bg-info no-border">
                        <h4 class="text-u-c m-b-none">Xeditable</h4>
                    </div>
                    <div class="panel-body form-horizontal">
                        <div class="form-group">
                            <p class="form-control-static">
                                <a editable-textarea="user.desc" e-rows="7">
                                    {{ user.desc || 'no description' }}
                                </a>
                            </p>
                        </div>
                    </div>
                    <div class="panel-footer"></div>
                </div>
            </div>
        </div>
        <div class="row row-sm">
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="panel b-a">
                    <div class="panel-heading text-center bg-info no-border">
                        <h4 class="text-u-c m-b-none">Button</h4>
                    </div>
                    <ul class="list-group">
                        <li class="list-group-item">
                            <i class="icon-check text-success m-r-xs"></i>
                            组件参数：<br/>
                            value（按钮名）、<br/>isdisabled（是否禁用，默认启用）、<br/>isshow(是否显示，默认显示）、<br/>fon-click（单击事件）、<br/>back-data（事件内参数）、<br/>
                        </li>
                        <li class="list-group-item">
                            <i class="icon-check text-success m-r-xs"></i>
                            演示代码如下：<br/>
                            {{ demo.BUTTON }}
                        </li>
                    </ul>
                    <div class="panel-footer text-center" style="height: 140px;">

                        <winit-button isdisabled="demo.isdisabled" isshow="demo.isshow" value="demo.value"
                                      back-data="'button function测试数据'" fon-click="click(backData)"></winit-button>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="panel b-a">
                    <div class="panel-heading text-center bg-info no-border">
                        <h4 class="text-u-c m-b-none">select</h4>
                    </div>
                    <ul class="list-group">
                        <li class="list-group-item">
                            <i class="icon-check text-success m-r-xs"></i>
                            组件参数：<br/>
                            widthdata（设置select的宽度）、<br/>label（select前的标题）、<br/>datalist（select选中对象）、<br/>optiondata（选项中展示的数据）、<br/>fonChange（函数回调选中数据、方法参数必须为selectData）
                        </li>
                        <li class="list-group-item">
                            <i class="icon-check text-success m-r-xs"></i>
                            演示代码如下：<br/>
                            {{ demo.select }}
                        </li>
                        <div class="panel-footer text-center" style="height: 140px;">

                        <winit-select modeldata="demo.thisdata"  fon-change="selectedThis(selectedData)" label="demo.field" optiondata="key" datalist="demo.selectData" ></winit-select>
                        </div>
                    </ul>
                </div>
            </div>

            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="panel b-a">
                    <div class="panel-heading text-center bg-info no-border">
                        <h4 class="text-u-c m-b-none">文本框</h4>
                    </div>
                    <ul class="list-group">
                        <li class="list-group-item">
                            <i class="icon-check text-success m-r-xs"></i>
                            组件参数：<br/>
                            textdata:文本数据、<br/>
                            data(数据对象)：（label、vastat返回校验boolean）、<br/>
                            validate：（校验参数、格式是list）：暂时校验分三种，非空、最大长度、正则匹配<br/>
                            fon-blur（回调函数 返回验证结果，及文本数据、参数固定为 backdata）;

                        </li>
                        <li class="list-group-item">
                            <i class="icon-check text-success m-r-xs"></i>
                            演示代码如下:<br/>{{ demo.Input }}

                        </li>
                    </ul>
                    <div class="panel-footer text-center" style="height: 160px;">

                        <form name="form1" class="form-validation">
                            <div class="col-sm-6">
                                <winit-text textdata="info.textdata" fon-blur="validateData(backdata)" data="info.data" validate="info.validate"></winit-text>
                            </div>
                        </form>

                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="panel b-a">
                    <div class="panel-heading text-center bg-info no-border">
                        <h4 class="text-u-c m-b-none">CONFIRM</h4>
                    </div>
                    <ul class="list-group">
                        <li class="list-group-item">
                            <i class="icon-check text-success m-r-xs"></i>
                            调用模板如下：<br/>$rootScope.confirmWindow($scope.info, function(){})<br/>
                            组件参数：<br/>
                            titleData、bodyData(两个参数统一放在方法传参的对象中)，fon-click(回调函数，返回选中的哪个方法
                            save 或 cancel
                        </li>
                        <li class="list-group-item">
                            <i class="icon-check text-success m-r-xs"></i>
                            模板点击下边
                        </li>
                        <div class="panel-footer text-center" style="height: 220px;">
                            <button class="btn btn-success" ng-click="openWin()">弹窗</button>

                        </div>
                    </ul>
                </div>
            </div>

        </div>

        <div class="row no-gutter">
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="panel b-a">
                    <div class="panel-heading wrapper-xs bg-primary no-border">
                    </div>
                    <div class="wrapper text-center b-b b-light">
                        <h4 class="m-t-none">
                            <span class="text-2x text-lt">BUTTONS</span>
                        </h4>
                    </div>
                    <ul class="list-group text-center no-borders m-t-sm">
                        <li class="list-group-item">
                            <i class="icon-check text-success m-r-xs"></i>
                            组件参数：<br/>
                            fon-click:一个方法参数，根据传参不同，判断是哪个按钮活动，<br/>
                            isdisabled:是否禁用,<br/>
                            如果需要判断save或cancel，需要在调用组件时方法加入参数type
                        </li>
                        <li class="list-group-item">
                            <i class="icon-check text-success m-r-xs"></i>
                            演示代码如下：<br/>{{ demo.BUTTONS }}
                        </li>
                    </ul>
                    <div class="panel-footer text-center" style="height: 380px;">
                        <winit-buttons fon-click="click(type)" isdisabled="demo.boo"></winit-buttons>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="panel b-a">
                    <div class="panel-heading wrapper-xs bg-primary no-border">
                    </div>
                    <div class="wrapper text-center b-b b-light">
                        <h4 class="m-t-none">
                            <span class="text-2x text-lt">TEXTAREA</span>
                        </h4>
                    </div>
                    <ul class="list-group text-center no-borders m-t-sm">
                        <li class="list-group-item">
                            <i class="icon-check text-success m-r-xs"></i>
                            组件参数：<br/>
                            textdata:文本数据、<br/>
                            data：（数据对象，内部label、文本数据、返回校验）、<br/>
                            validata：（校验参数、格式是list）、<br/>
                            fon-blur：（回调函数 返回验证结果，及文本数据、参数固定为 backdata）;
                        </li>
                        <li class="list-group-item">
                            <i class="icon-check text-success m-r-xs"></i>
                            演示代码如下：<br/>
                            {{ demo.TEXTAREA }}
                        </li>
                    </ul>
                    <div class="panel-footer text-center" style="height: 340px;">
                        <winit-textarea data="info.data" textdata="info.textdata" validate="info.validate" fon-blur="validateData(backdata)"></winit-textarea>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="panel b-a">
                    <div class="panel-heading wrapper-xs bg-primary no-border">
                    </div>
                    <div class="wrapper text-center b-b b-light">
                        <h4 class="m-t-none">
                            <span class="text-2x text-lt">CHECKBOXS&CHECKBOX</span>
                        </h4>
                    </div>
                    <ul class="list-group text-center no-borders m-t-sm">
                        <li class="list-group-item">
                            <i class="icon-check text-success m-r-xs"></i>
                            winit-checkbox：<br/>
                                单个的复选、只返回是否选中。<br/>
                                组件参数：ischeck。<br/>
                            演示代码：<br/>{{demo.CHECKBOX}}
                        </li>
                        <li class="list-group-item">
                            <i class="icon-check text-success m-r-xs"></i>
                            winit-checkboxs：<br/>
                                复选列表<br/>
                                组件参数:checkList<br/>
                            演示代码：<br/>{{demo.CHECKBOXS}}
                        </li>
                    </ul>
                    <div class="panel-footer text-center" >
                        checkbox：<winit-checkbox ischeck="demo.boo"></winit-checkbox>{{ demo.boo }}<br/>
                        checkboxs：<winit-checkboxs check-list="demo.checkData"></winit-checkboxs>
                        {{demo.checkData}}
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="panel b-a">
                    <div class="panel-heading wrapper-xs bg-primary no-border">
                    </div>
                    <div class="wrapper text-center b-b b-light">
                        <h4 class="m-t-none">
                            <span class="text-2x text-lt">FILE UPLOAD</span>
                        </h4>
                    </div>
                    <ul class="list-group text-center no-borders m-t-sm">
                        <li class="list-group-item">
                            <i class="icon-check text-success m-r-xs"></i>
                        </li>
                        <li class="list-group-item">
                            <i class="icon-check text-success m-r-xs"></i>
                        </li>
                    </ul>
                    <div class="panel-footer text-center">
                        <p class="m-t-md">Single</p>
<!--
                        <input type="file" nv-file-select="" uploader="uploader" multiple />
-->                     <winit-file-upload></winit-file-upload>

                    </div>
                </div>
            </div>
        </div>

        <div class="wrapper-md">
            <div class="row row-sm">

                <div class="col-lg-3 col-md-4 col-sm-6">
                    <input type="" ng-model="info.mhtml" name="">
                    <m-form  invalid="info.invalid">
                        <m-form-lable title="富文本框" method="zzz">
                            <m-form-line label="input">
                                <m-wysiwyg mhtml="info.mhtml"></m-wysiwyg>
                            </m-form-line>
                            <m-form-line label="ddddd">
                                <m-datepicker select-dt="info.date.selectDt"></m-datepicker>
                            </m-form-line>
                            <m-form-line label="switch">
                                <!--<m-switch status="info.swdata[1].check"></m-switch>-->
                                <m-switch ng-repeat="x in info.swdata" status="x.check"></m-switch>
                                {{info.swdata}}
                            </m-form-line>
                    </m-form-lable>
                    </m-form>
                </div>

                <div class="col-lg-3 col-md-4 col-sm-6">
                    <div class="panel b-a">
                        <div class="panel-heading text-center bg-info no-border">
                            <h4 class="text-u-c m-b-none">TREE</h4>
                            <winit-text-number number-data="info.number"></winit-text-number>
                            {{info.number}}
                        </div>
                        <ul class="list-group">
                            <li class="list-group-item">
                                <i class="icon-check text-success m-r-xs"></i>
                                组件参数：<br/>
                            </li>
                            <li class="list-group-item">
                                <i class="icon-check text-success m-r-xs"></i>
                                演示代码如下：<br/>
                                {{info.TREE}}
                            </li>
                        </ul>
                        <div class="panel-footer text-center">
                            <m-fun-tree></m-fun-tree>
                            <winit-select-user fon-change="change(backData)" modeldata="demo.admin"></winit-select-user>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <div class="panel b-a">
                        <rzslider rz-slider-model="slider.minValue"
                                  rz-slider-high="slider.maxValue"
                                  rz-slider-options="slider.options"></rzslider>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <div class="panel b-a">
                        <winit-transform></winit-transform>
                    </div>
                </div>


                <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="panel b-a">
                    <div class="panel-heading wrapper-xs bg-primary no-border">
                    </div>
                    <div class="wrapper text-center b-b b-light">
                        <h4 class="m-t-none">
                            <span class="text-2x text-lt">WEBSOCKET</span>
                        </h4>
                    </div>
                    <ul class="list-group text-center no-borders m-t-sm">
                        <li class="list-group-item">
                            <i class="icon-check text-success m-r-xs"></i>
                            所需配置：<br/>
                            rabbit需要配置stomp有关的一系列插件，命令如下<br/>
                            rabbitmq-plugins enable rabbitmq_management rabbitmq_web_stomp rabbitmq_stomp rabbitmq_web_stomp_examples<br/>
                            查看是否配置成功<br/>
                            <a ng-click="openRabbitTest()">跳转测试</a>
                        </li>
                        <li class="list-group-item">
                            <i class="icon-check text-success m-r-xs"></i>
                            演示代码如下：<br/>
                        </li>
                    </ul>
                     <div class="form-group">
                      <label>云链ip地址-不需要输入端口:</label>
                      <input class="form-control" placeholder="请输入用户名...." ng-model="demo.sockJsUrl">
                    </div>
                    <div class="form-group">
                      <label>rabbit用户名:</label>
                      <input class="form-control" placeholder="请输入用户名...." ng-model="demo.userName">
                    </div>
                    <div class="form-group">
                      <label>rabbit密码:</label>
                      <input class="form-control" placeholder="Password" type="password" ng-model="demo.passWord">
                    </div>
                    <div class="panel-footer text-center" style="height: 340px;">
                        <button type="submit" class="btn btn-sm btn-primary" ng-click="openWebSocket()">链接websocket</button>
                        <button type="submit" class="btn btn-sm btn-primary" ng-click="onclose()">断开链接</button>
                    </div>
                </div>

                <!-- <div class="panel-body">
                  <form role="form" class="ng-pristine ng-valid">
                    <div class="form-group">
                      <label>Email address</label>
                      <input class="form-control" placeholder="Enter email" type="email">
                    </div>
                    <div class="form-group">
                      <label>Password</label>
                      <input class="form-control" placeholder="Password" type="password">
                    </div>
                    <div class="checkbox">
                      <label class="i-checks">
                        <input checked="" disabled="" type="checkbox"><i></i> Check me out
                      </label>
                    </div>
                    <button type="submit" class="btn btn-sm btn-primary">Submit</button>
                  </form>
                </div> -->
            </div>
            </div>
        </div>

    </div>
</div>